This PR adds a Network tab to the individual node page, displaying connectivity data that helps users understand network topology and relationships between nodes.

Changes Made

New Network Tab

• Added a "Network" tab to the node page (alongside Storage, Tablets, Threads tabs) that displays:
  • Current node visualization on the left side
  • Network peers connectivity on the right side
  • Problem filtering capabilities to show all nodes or only problematic connections
  • Toggle options for displaying node IDs and rack information

UI Components

• Created NodeNetwork component that follows the same pattern as the database network tab
• Reuses existing NodeNetwork component from the database diagnostics for consistent visualization
• Integrates seamlessly with existing node page tab navigation
• Shows current node and filters network data specifically for that node

Tab Configuration

• Added "network" to NODE_TABS_IDS and NODE_TABS configuration
• Updated node page routing to handle the network tab
• Added network tab case to the renderTabContent switch in Node.tsx

Internationalization

• Added network tab label following project i18n conventions:
  • "Network" tab title

Technical Implementation

The implementation leverages the existing network API (networkApi.useGetNetworkInfoQuery) and filters the results to focus on the current node and its peers. The network tab uses the same visual components and interaction patterns as the database network tab, providing a consistent user experience.

The network information is fetched only when a tenant name is available, and the component gracefully handles cases where no network data or peers are found.

Visual Impact

The network tab provides users with:

• Visual representation of the current node and its network peers
• Interactive problem filtering to focus on connectivity issues
• Consistent styling and behavior with other node page tabs
• Clear separation between current node and peer nodes

This enhancement improves the monitoring and debugging experience for YDB cluster administrators by making network relationships more visible and accessible at the individual node level.

Fixes #2428.

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

Greptile Summary

Updated On: 2025-09-15 16:31:54 UTC

This PR adds a new "Network" tab to individual node pages in the YDB Embedded UI, providing network connectivity visualization at the node level. The implementation follows the established architectural patterns by adding the network tab configuration to NODE_TABS_IDS and NODE_TABS arrays, and integrating it into the main Node component's tab rendering system.

The changes are minimal and focused, consisting of two key modifications: extending the node page configuration in NodePages.ts to include the network tab with proper internationalization support, and updating the main Node.tsx component to handle the new network tab case by importing and rendering the NodeNetwork component. The network tab reuses existing network API endpoints and visualization components from the database-level network diagnostics, but filters the data to show only the current node and its direct peers.

The implementation integrates seamlessly with the existing tab navigation system used for Storage, Tablets, Structure, and Threads tabs. The network tab receives both nodeId and tenantName props to enable proper data fetching and context-aware filtering. This enhancement provides administrators with node-specific network topology visualization, complementing the existing database-level network monitoring capabilities and improving the debugging experience for connectivity issues.

Important Files Changed

Confidence score: 4/5

• This PR is safe to merge with minimal risk as it adds a new optional feature without modifying existing functionality
• Score reflects straightforward implementation following established patterns, though the missing NodeNetwork component file prevents full validation
• Pay close attention to ensuring the NodeNetwork component exists and properly handles the nodeId and tenantName props

Sequence Diagram

sequenceDiagram
    participant User
    participant NodePage as Node.tsx
    participant NodeNetwork as NodeNetwork.tsx
    participant NetworkAPI as networkApi
    participant Redux as Redux Store
    participant Components as UI Components

    User->>NodePage: "Navigate to node page with network tab"
    NodePage->>NodePage: "Parse activeTabId from URL"
    NodePage->>NodePage: "Filter available tabs based on node capabilities"
    
    alt Network tab selected
        NodePage->>NodeNetwork: "Render NodeNetwork component"
        NodeNetwork->>Redux: "Get auto refresh interval"
        NodeNetwork->>Redux: "Get problem filter state"
        NodeNetwork->>NetworkAPI: "useGetNetworkInfoQuery(tenantName)"
        NetworkAPI-->>NodeNetwork: "Return network data or loading state"
        
        alt Data loading
            NodeNetwork->>Components: "Show loader"
            Components-->>User: "Display loading spinner"
        else Data loaded successfully
            NodeNetwork->>NodeNetwork: "Find current node and peers"
            NodeNetwork->>NodeNetwork: "Group nodes by type and rack"
            NodeNetwork->>Components: "Render controls (filters, checkboxes)"
            NodeNetwork->>Components: "Render current node section"
            NodeNetwork->>Components: "Render network peers section"
            Components-->>User: "Display network visualization"
        else No network data
            NodeNetwork->>Components: "Show placeholder with network icon"
            Components-->>User: "Display 'No network peers found' message"
        else Error occurred
            NodeNetwork->>Components: "Show ResponseError"
            Components-->>User: "Display error message"
        end
    end

    User->>NodeNetwork: "Toggle problem filter"
    NodeNetwork->>Redux: "Dispatch changeFilter action"
    Redux-->>NodeNetwork: "Update filter state"
    NodeNetwork->>Components: "Re-render filtered nodes"
    Components-->>User: "Update display based on filter"

    User->>NodeNetwork: "Toggle show ID checkbox"
    NodeNetwork->>NodeNetwork: "Update showId state"
    NodeNetwork->>Components: "Re-render nodes with/without IDs"
    Components-->>User: "Toggle node ID visibility"

    User->>NodeNetwork: "Toggle show racks checkbox"
    NodeNetwork->>NodeNetwork: "Update showRacks state"
    NodeNetwork->>Components: "Re-render nodes with rack grouping"
    Components-->>User: "Toggle rack visualization"

    User->>Components: "Hover over node"
    Components->>Redux: "Dispatch showTooltip action"
    Redux-->>User: "Display node tooltip"

    User->>Components: "Mouse leave node"
    Components->>Redux: "Dispatch hideTooltip action"
    Redux-->>User: "Hide tooltip"